<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>电影列表</title>
</head>
<body>
<div>
    <h1>电影信息列表</h1>
    <input type="button" value="添加电影" onclick="location.href='add.jsp'" />
    <input name="" />
    <table>
        <tr>
            <th>电影名称</th>
            <th>电影类型</th>
            <th>价格</th>
            <th>是否推荐</th>
            <th>上映时间</th>
            <th>下映时间</th>
            <th>投票数</th>
            <th>操作</th>
        </tr>

        <%--<c:forEach items="${list}" var="mv">
            <tr>
                <td>${mv.movieName}</td>
                <td>${mv.movieType}</td>
                <td>${mv.price}</td>
                <td>
                    <c:if test="${mv.recommend==0}">不推荐</c:if>
                    <c:if test="${mv.recommend==1}">推荐</c:if>
                </td>
                <td>${mv.startTime}</td>
                <td>${mv.endTime}</td>
                <td>${mv.votes}</td>
                <td>
                    <a href="GetByIdServlet?id=${mv.movieId}">修改</a>
                    <a href="javascript:void(0)" onclick="del(${mv.movieId},this)">删除</a>
                </td>
            </tr>
        </c:forEach>--%>
    </table>
    <div id="page">

        <%--<a href="GetByPageServlet?pageNo=1">首页</a>
        <a href="GetByPageServlet?pageNo=${pageNo-1}">上一页</a>
        <a href="GetByPageServlet?pageNo=${pageNo+1}">下一页</a>
        <a href="GetByPageServlet?pageNo=${totalPage}">末页</a>
        第${pageNo}页，共${totalPage}页，总记录${totalCount}数条--%>
    </div>

</div>
<script src="js/jquery.js"></script>
<script>
    $(function () {
        changePage(1);
    })
    //实现Ajax实现分页功能
    function changePage(pageNo) {
        $.post("GetByPageAjaxServlet",{"pageNo":pageNo},function (data) {
            //清除数据
            $("table tr:gt(0)").remove();

            var list=data.list;
            var totalCount=data.totalCount;
            var totalPage=data.totalPage;
            var pageNo=data.pageNo;

            for(var i in list){
                var mv=list[i];
                var rm="推荐";
                if(mv.recommend==0){
                    rm="不推荐";
                }
                var tr=`<tr>
                <td>`+mv.movieName+`</td>
                <td>`+mv.movieType+`</td>
                <td>`+mv.price+`</td>
                <td>${rm}</td>
                <td>`+mv.startTime+`</td>
                <td>`+mv.startTime+`</td>
                <td>`+mv.votes+`</td>
                <td>
                    <a href="GetByIdServlet?id=`+mv.movieId+`">修改</a>
                    <a href="javascript:void(0)" onclick="del(`+mv.movieId+`,this)">删除</a>
                </td>
            </tr>`;
                $("table").append(tr);
            }
            //显示分页操作按钮
            var page=`<a href="javascript:changePage(1)">首页</a>
        <a href="javascript:changePage(`+(pageNo-1)+`)">上一页</a>
        <a href="javascript:changePage(`+(pageNo+1)+`)">下一页</a>
        <a href="javascript:changePage(`+totalPage+`)">末页</a>
        第`+pageNo+`页，共`+totalPage+`页，总记录数`+totalPage+`条`;
            $("#page").html(page);

        },"json")
    }
    
    //使用Ajax实现删除
    function del(id,a) {
        if(confirm("确定要删除吗？")){
            $.post("DeleteServlet",{"id":id},function (data) {
                if(data=="true"){
                    alert("删除成功");
                    $(a).parents("tr").remove();
                }else{
                    alert("删除失败")
                }
            },"text")

        }
    }
</script>
</body>
</html>
